<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-select v-model="listQuery.workstation" placeholder="请选择车间" clearable style="width: 200px" class="filter-item">
        <el-option v-for="item in selectOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select> -->
      <el-date-picker
        v-model="listQuery.datetime"
        type="date"
        placeholder="请输入时间" class="filter-item">
      </el-date-picker>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves class="filter-item" type="info" icon="el-icon-refresh" @click="handleReset">
        重置
      </el-button>
    </div>
    <el-row v-for="(item, index) in dataList" :key="index">
      <div ref="chart" class="chart" :style="chartStyle" />
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'
import resize from '../mixins/resize'
import { fetchJPHList } from '@/api/bdc/output-chart'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
// 固定值，配置改动时需要改动
const selectOptions = [
  { key: 'HZ11', label: '焊装车间' },
  { key: 'TZ11', label: '涂装车间' },
  { key: 'ZZ11', label: '总装车间' }
]
const animationDuration = 3000
export default {
  name: 'DailyJphChart',
  directives: { waves },
  mixins: [resize],
  data() {
    return {
      // 查询模块
      listQuery: {
        workstation: undefined,
        datetime: null
      },
      selectOptions: selectOptions,
      // echarts
      // chart: null,
      chartStyle: {height: '500px', width: '100%'},
      // chartData: null,
      // 数据列表
      dataList: []
    }
  },
  // watch: {
  //   chartData: {
  //     deep: true,
  //     handler(val) {
  //       this.setOptions(val)
  //     }
  //   }
  // },
  mounted() {
    // 初始化echarts容器
    // this.$nextTick(() => {
    //   this.chart = echarts.init(this.$refs.chart)
    // })
  },
  beforeDestroy() {
    // if (!this.chart) {
    //   return
    // }
    // this.chart.dispose()
    // this.chart = null
  },
  methods: {
    // 查询
    handleFilter() {
      // 验证
      // if (!this.listQuery.workstation) {
      //   this.$message.warning('请选择车间！')
      //   return
      // }
      if (!this.listQuery.datetime) {
        this.$message.warning('请输入日期！')
        return
      }
      const data = {
        workshopNo: this.listQuery.workstation,
        startTime: parseTime(this.listQuery.datetime, '{y}-{m}-{d}')
      }
      fetchJPHList(data).then(res => {
        this.dataList = []
        for (const i of res.data) {
          for (const j of i.jphLineList) {
            const ele = {
              title: j.name,
              theory: [j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph, j.jph],
              real: j.realityJph.map(k => k.total)
            }
            this.dataList.push(ele)
          }
        }
        // 动态dom，延时获取
        setTimeout(() => this.setOptions(), 1000)
        
        // console.log('dataList', this.dataList)
        // if (res.code == 200) {
        //   this.initChart()
        //   // test jphData
        //   const series1 = [20, 20, 20, 20, 20, 20, 20, 0, 20, 20, 20, 20, 0, 20, 20, 20, 20, 20, 0, 20, 20, 20, 20, 20]
        //   this.chartData.series.push(series1)
        //   const series2 = []
        //   for (const i of this.chartData.xAxisData) {
        //     if (res.data.find(a => a.NEWHOUR === i)) {
        //       series2.push(res.data.find(a => a.NEWHOUR === i).TOTAL)
        //     } else {
        //       series2.push(0)
        //     }
        //     this.chartData.series.push(series2)
            
        //   }
        //   this.setOptions(this.chartData)
        // } else {
        //   this.$message.error('服务器内部错误！');
        // }
      })
      
    },
    // initChart() {
    //   // 初始化echarts数据
    //   // 作息未确定，默认为0-23
    //   this.chartData = {
    //     xAxisData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
    //     series:[]
    //   }
    // },
    // 重置
    handleReset() {
      this.listQuery = {
        workstation: undefined,
        datetime: null
      }
    },
    setOptions() {
      for(let i = 0; i < this.dataList.length; i++) {
        const element = this.dataList[i];
        // console.log('this.chartData', this.$refs.chart)
        const chart = echarts.init(this.$refs.chart[i]);
        chart.setOption({
          title: {
            text: element.title
          },
          // 配置x轴点位显示居中还是居左
          xAxis: {
            // 作息未确定，默认为0-23
            data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
            // boundaryGap: false,
            axisTick: {
              show: true
            },
            axisLabel: {
              formatter: '{value}时'
            }
          },
          // 控制坐标轴位置
          // grid: {
          //   left: 10,
          //   right: 10,
          //   bottom: 20,
          //   top: 30,
          //   containLabel: true
          // },
          // 控制点hover显示
          tooltip: {
            trigger: 'axis',
            // axisPointer: {
            //   type: 'cross'
            // },
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
            // padding: [5, 10]
          },
          yAxis: {
            axisTick: {
              show: false
            },
          },
          // 控制分项线条显示，对应series.name
          legend: {
            data: ['理论JPH', '实际JPH']
          },
          series: [{
            name: '理论JPH', 
            itemStyle: {
              normal: {
                // color: '#000',
                lineStyle: {
                  // color: '#000',
                  width: 2
                }
              }
            },
            // smooth: true,
            type: 'line',
            step: 'middle',
            data: element.theory,
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
          },
          {
            name: '实际JPH', 
            itemStyle: {
              normal: {
                color: '#1890ff',
                lineStyle: {
                  // color: '#000',
                  width: 2
                },
                // 显示点值
                label: {
                  show: true,
                  position: 'top',
                  fontSize: 18
                }
              }
            },
            type: 'bar',
            data: element.real,
            stack: 'vistors',
            barWidth: '60%',
            animationDuration: 2800,
            // animationDuration: 2800,
            // animationEasing: 'cubicInOut',
          }]
        })
      }
    }
  }
}
</script>